//我自己的utils
const utils={
    /**
     * 
     * @param {string} key【键】 要存的那条cookie的名称
     * @param {*} value 要存的那条cookie的值
     * @param {*} [option ] 一个对象参数
     */
    //封装setCookie()方法--字符串的拼接
    setCookie: function(key,value,option) {
        str=`${key}=${encodeURIComponent(value)}`
        //判断是否传了option
        if(option){
            //判断是否传了path
            if(option.path){
                str+=`;path=${option.path}`
            }
            //判断是否传了expires
            if(option.expires){
                var date=new Date()
                date.setDate(date.getDate()+option.expires)
                str+=`;expires=${date}`
            }
        }
        //把这条str字符串当做cookie存起来
        document.cookie=str
    },
    /**
     * @param {String} key 要取的那条cookie
     * @return {String} 这条cookie的值
     * getCookie核心思路是把取到的cookie转化为json对象，然后再return 目的是：输入键 得到值
     */
    getCookie:function (key) {
        //首先取到所有的cookie(是带有;的一串值)
        var str = document.cookie
        //根据; 把每一条cookie分离出来
        var arr = str.split("; ")
        //console.log(arr)//此时得到的数据键值对以=连接
        //遍历每一条cookie，然后把它的键值对分离,并以json格式保存起来
        var obj={}
        arr.forEach(item =>{
            //把键值对根据=分离
            var subarr=item.split("=")
            //把分离后的键值对分别存进json
            //decodeURIComponent 解码
            obj[subarr[0]]=decodeURIComponent(subarr[1])
        })
        //返回json存进对象obj里
        return obj[key]
    },
    /**
     * 利用ajax实现前后端数据交互
     * @param {String} url 请求的地址 （从哪里得到数据）
     * @param {String} query {id:Number,page:Number}拼接地址url的参数
     * @param {bool} isJSON  是否要得到json数据,默认为true
     * @param {Object} callback 是回调函数
     * query 是拼接url传进来的参数
     */
    get:function(url,query,callback,isJson=true){
        //准备工作，完成url的拼接（如果query传来了值）
        if(query){
            //因为get请求在url 后是加了？开始拼接的
            url+='?'
            //遍历对象用for in
            for(var key in query){
                //模板字符串的拼接 遍历key取key的值value 
                url+=`${key}=${query[key]}&`
            }
            //把最后的&剪掉，得到真实地址
            url = url.slice(0,-1)
        }
        //创建ajax核心对象
        var xhr = new XMLHttpRequest()
        //建立连接
        xhr.open('get',url)
        //发送请求
        xhr.send()
        //监听后端状态变化
        xhr.onreadystatechange = function () {
            //成功返回数据
            if(xhr.readyState===4){
             //返回的数据是否是前端请求的、想要的数据
             if(xhr.status===200){
                 //用res变量接收后台返回的数据，并判断是否需要返回一个json格式数据
                 var res = isJson ?  JSON.parse(xhr.responseText) : xhr.responseText
              callback&&callback(res)
             }
            }
        }
    },
    /**
     * 
     * @param {String} url 请求的地址
     * @param {object} query 需要拼接到url的参数
     * @param {*} callback 回调函数
     * @param {*} isJson 是否需要得到json数据，默认为true
     */
    post:function(url,query,callback,isJson=true){
          //先处理query做准备工作
          var str=''
          if(query){
               for (var key in query){
                   str+=`${key}=${query[key]}&`
               }
               //这个str是放在send里作为参数的
               str = str.slice(0, -1)
            }
               //准备完成，开始使用ajax进行前后端交互
               //创建ajaxa核心对象
               var xhr = new XMLHttpRequest()
               //建立连接
               xhr.open('post',url)
               //设置请求头
               xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
               //发送请求
               xhr.send(str)
               //监听后台状态变化
               xhr.onreadystatechange = function () {
                   //返回数据成功
                   if(xhr.readyState===4){
                       //判断返回的数据是不是前端需要得到的数据
                       if(xhr.status===200){
                           //表明是 需要的数据 res存起来备用
                           var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                           //是否需要回调函数第一个看前端有没有传回调函数,并把值res传给回调函数
                           //总不能直接callback()
                           //前端不需要callback这里不能强行执行回调函数
                           callback&&callback(res)
                       }
                   }
               }
          },
    //封装一个jsonp方法，用于跨域访问,其实就是拼接一个放在script src里的url
    /**
     * 
     * @param {String} url 要跨域访问的地址
     * @param {function} cb 回调函数
     * @param {object} query  如果还有别的参数 拼接进url
     */
    jsonp:function(url,cb,query){
        //这里的cb会在PHP里$cb=$_GET['cb']里取到，然后PHP返回这个调用函数的方法cb()
        url+=`?cb=${cb}`
        if(query){
            for (var key in query){
                url+=`&${key}=${query[key]}`
            }
        }
      //得到这个地址
      
      //生成一个script标签 并把url传进去
      var script = document.createElement('script')//得到<script></script>
      //把url传进去
      script.src=url
      //把这个script标签在页面生成,当前端发送请求的时候，其实就已经完成任务，所以紧接着把这script删除
      document.body.appendChild(script)
      //删除script
      document.body.removeChild(script)
    },
    //封装一个Promise的ajax的get请求
    /**
     * 
     * @param {String} url 请求的地址
     * @param {object}} query 是否传了其他的参数，是的话就拼接在url
     * @param {boolean} isJson 是否要返回json格式的数据，默认为true
     */
    fetch:function(url,query,isJson=true){
        //把query参数拼接到url
        if(query){
            url+=`?`
            for(var key in query){
                url+=`${key}=${query[key]}&`
            }
            url=url.slice(0,-1)
        }
        //开始封装promise 的 ajax 的 get请求
        //返回这个实例，这样才能在调用这个方法的时候能用到.then()方法做兑现的逻辑避免回调
        return new Promise((resolve,reject)=>{
            //ajax --创建ajax核心对象
            var xhr = new XMLHttpRequest()
            //建立连接
            xhr.open('get',url)
            //发送请求
            xhr.send()
            //监听后台状态改变
            xhr.onreadystatechange = function () {
                if(xhr.readyState===4){
                    //请求数据成功
                    if(xhr.status===200){
                        //后端返回的数据的确是正确需要的,接收这个数据，拿到前端用
                        //前端需要得到的数据是不是json格式
                        var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                        resolve(res)

                    }else{
                        reject()
                    }
                }
            }
            
        })
    }
    }
